<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>卷烟消费 -- 消费行为统计</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap-datetimepicker.min.css">
    <link href="${contextPath}/static/ztree/css/zTreeStyle.css" rel="stylesheet"/>
    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${contextPath}/static/statistics/js/vue.js"></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.mockjax.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.excheck-3.5.js"></script>
    <script type="text/javascript" src="${contextPath}/static/util/my-autocomplete.js"></script>
    <style>
        .spinner {
            margin: 11px auto 0;
            height: 20px;
            text-align: center;
        }

        .spinner > div {
            width: 10px;
            height: 10px;
            background-color: #67CF22;

            border-radius: 100%;
            display: inline-block;
            -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
            animation: bouncedelay 1.4s infinite ease-in-out;
            /* Prevent first frame from flickering when animation starts */
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }

        .spinner .bounce1 {
            -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
        }

        .spinner .bounce2 {
            -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s;
        }

        @-webkit-keyframes bouncedelay {
            0%, 80%, 100% {
                -webkit-transform: scale(0.0)
            }
            40% {
                -webkit-transform: scale(1.0)
            }
        }

        @keyframes bouncedelay {
            0%, 80%, 100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }
            40% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        }

        .autocomplete-suggestions {
            border: 1px solid #999;
            background: #FFF;
            overflow: auto;
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }

        @-moz-document url-prefix() {
            fieldset {
                display: table-cell;
            }
        }
    </style>
</head>
<body style="background: rgba(119, 118, 118, 0.15);">
<button style="position: absolute; top: 5px;right: 20px;"
        class="btn btn-info" onclick="javascript:window.opener=null;window.open('','_self');window.close();">关闭</button>
<div class="container-fluid" id="app">
    <div class="row">
        <h4 class="col-sm-6 col-xs-9">卷烟消费行为统计：</h4>
        <%--  <div class="spinner col-sm-6 col-xs-3" style="text-align: right;" title="正在实时获取数据标志">
              <div class="bounce1"></div>
              <div class="bounce2"></div>
              <div class="bounce3"></div>
          </div>--%>
    </div>

    <form class="form-inline" style=" margin-bottom: 5px;">
        <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
            <div class="form-group">
                <input id="cityNameInput" onfocus="this.value=''" class="form-control input-sm" type="text" placeholder="市局名称">
            </div>
            <div class="form-group">
                <input id="quXianNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                       placeholder="区县名称">
            </div>
        </shiro:hasPermission>
        <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
            <shiro:lacksPermission name="CLOUDERPORDERSPLCHANNELORDER:STATISTICS">
                <div class="form-group">
                    <input id="channelNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                           placeholder="渠道名称">
                </div>
            </shiro:lacksPermission>
            <div class="form-group">
                <input id="empNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                       placeholder="客户经理名称">
            </div>
        </shiro:lacksPermission>
        <div class="form-group input-group">
            <input id="prodNameInput" class="form-control input-sm" readonly type="text" placeholder="默认为磨砂">
            <span class="input-group-btn">
				<button type="button" class="btn btn-info btn-sm" title="选择商品作为查询条件"
                        onclick="javascript:$('#gridSystemModal').modal('show');">选择</button>
                <button type="button" class="btn  btn-sm" title="选择全部商品或者默认磨砂"
                        @click="isAllChoise = !isAllChoise"
                        v-bind:class="{'btn-success' : isAllChoise}">
                {{isAllChoise ? '已全选' : '全选'}}
                </button>
			</span>
        </div>
        <div class="form-group">
            <input id="operatorTimeInput" class="form-control input-sm" type="text" placeholder="请选择开始月份">
        </div>
        <div class="form-group">
            <input id="endOperatorTimeInput" class="form-control input-sm" type="text" placeholder="请选择结束月份">
        </div>
        <button type="button" class="btn btn-sm btn-success" @click="getData();">查询</button>
    </form>

    <div class="row">
        <div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 main" id="main1" style="margin-top: 10px;"></div>
        <div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 main" id="main2" style="margin-top: 10px;"></div>
        <div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 main" id="main3" style="margin-top: 10px;"></div>
    </div>

    <div class="row">
        <div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 main" id="main4" style="margin-top: 10px;"></div>
        <div class="col-sm-12 col-xs-12 col-md-8 col-lg-8 main" id="main5" style="margin-top: 10px;"></div>
    </div>

    <div class="row">
        <div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 main" id="main7" style="margin-top: 10px;"></div>
        <div class="col-sm-12 col-xs-12 col-md-8 col-lg-8 main" id="main6" style="margin-top: 10px;"></div>
    </div>

</div>

<div class="modal fade" tabindex="-1" role="dialog" id="gridSystemModal" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel">选择品规</h4>
            </div>
            <div class="modal-body">
                <div class="content_wrap">
                    <div class="zTreeDemoBackground left">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="selectProductTreeNames();">确认</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
<script src=${contextPath}/static/layer/layer.js></script>
<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            isAllChoise : false,
            productCode: "'6901028039741'",
            time: '',
            cityName: '',
            quXianName: '',
            channelName: '',
            empName: '',
            endTime: ''
        },
        methods: {
            initTimeInput: function () {
                $('#operatorTimeInput').datetimepicker({
                    language: 'zh-CN',
                    weekStart: 1,
                    todayBtn: 1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 3,
                    forceParse: 0,
                    minView: 3,
                    showMeridian: 1,
                    format: "yyyy-mm",
                });
                $("#operatorTimeInput").on("change", function () {
                    app.time = this.value
                })

                var now = new Date();
                var defaultTime = now.getFullYear() + '-'
                var month = now.getMonth() + 1
                if (month < 10) {
                    month = '0' + month
                }
                defaultTime = defaultTime + month

                $("#operatorTimeInput").val(defaultTime)
                app.time = defaultTime


                $('#endOperatorTimeInput').datetimepicker({
                    language: 'zh-CN',
                    weekStart: 1,
                    todayBtn: 1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 3,
                    forceParse: 0,
                    minView: 3,
                    showMeridian: 1,
                    format: "yyyy-mm",
                });
                $("#endOperatorTimeInput").on("change", function () {
                    app.endTime = this.value
                })


            },
            getData: function () {
                layer.load(1)
                var cityName = $("#cityNameInput").val();
                var quXianName = $("#quXianNameInput").val();
                var channelName = $("#channelNameInput").val();
                var empName = $("#empNameInput").val();


                $.ajax({
                    url: '${contextPath}/checking/getSmokeCustomerStatistics',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        stringMap: {
                            productCode: this.isAllChoise ? '' : this.productCode,
                            time: this.time,
                            endTime: this.endTime,
                            cityName: cityName,
                            quXianName: quXianName,
                            channelName: channelName,
                            empName: empName
                        }
                    },
                    success: function (data) {
                        layer.closeAll('loading')
                        if (data.success) {
                            var main1Data = data.data.main1Data;
                            app.updateMain1Data(main1Data);

                            var main2Data = data.data.main2Data;
                            app.updateMain2Data(main2Data);

                            var main3Data = data.data.main3Data;
                            app.updateMain3Data(main3Data);

                            var main4Data = data.data.main4Data;
                            app.updateMain4Data(main4Data);

                            var main5Data = data.data.main5Data;
                            app.updateMain5Data(main5Data);

                            var main7Data = data.data.main7Data;
                            app.updateMain7Data(main7Data);

                            var main6Data = data.data.main6Data;
                            app.updateMain6Data(main6Data);
                        }else {
                            layer.msg(data.message)
                        }
                    },
                    error: function (error) {
                        layer.closeAll('loading')
                        layer.msg("网络错误")
                    }
                })
            },
            updateMain1Data: function (main1Data) {
                if (!main1Data) return
                /**
                 * 为了解决数据为空的情况，采用如此方法解决
                 * main1Data:[{name:'00:00-05:59',time:12,quantity:200}]
                 *
                 * */
                var times = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                var quantity = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                for (var index in main1Data) {
                    var data = main1Data[index]
                    var idx
                    switch (data.name) {
                        case '00:00-05:59':
                            idx = 0
                            break;
                        case '06:00-07.59':
                            idx = 1
                            break;
                        case '08:00-09.59':
                            idx = 2
                            break;
                        case '10:00-11.59':
                            idx = 3
                            break;
                        case '12:00-13.59':
                            idx = 4
                            break;
                        case '14:00-15.59':
                            idx = 5
                            break;
                        case '16:00-17.59':
                            idx = 6
                            break;
                        case '18:00-19.59':
                            idx = 7
                            break;
                        case '20:00-21.59':
                            idx = 8
                            break;
                        case '22:00-23.59':
                            idx = 9
                            break;
                        default:
                            ;
                    }
                    times[idx] = data.time
                    quantity[idx] = data.quantity
                }

                var main1Option = {
                    color: ['#4690FF', '#A3D2F7'],
                    title: {
                        text: '时段购买分布'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: false,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['购买次数', '购买量']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: ['00:00-05:59', '06:00-07.59', '08:00-09.59', '10:00-11.59', '12:00-13.59', '14:00-15.59', '16:00-17.59', '18:00-19.59', '20:00-21.59', '22:00-23.59']
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            name: '购买次数',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value} 次'
                            }
                        }, {
                            type: 'value',
                            name: '购买量',
                            position: 'right',
                            axisLabel: {
                                formatter: '{value} 包'
                            }
                        }],
                    series: [{
                        name: '购买次数',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: times
                    }, {
                        name: '购买量',
                        type: 'bar',
                        yAxisIndex: 1,
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: quantity
                    }]
                }
                myChart1.setOption(main1Option)
            },
            updateMain2Data: function (main2Data) {
                if (!main2Data) return
                /**
                 * 为了解决数据为空的情况，采用如此方法解决
                 * main1Data:[{name:'00:00-05:59',time:12,quantity:200}]
                 *
                 * */
                var orderCount = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                for (var index in main2Data) {
                    var data = main2Data[index]
                    var idx
                    switch (data.quantitySum) {
                        case '1包':
                            idx = 0
                            break;
                        case '2包':
                            idx = 1
                            break;
                        case '3-5包':
                            idx = 2
                            break;
                        case '6-9包':
                            idx = 3
                            break;
                        case '1条':
                            idx = 4
                            break;
                        case '1-2条':
                            idx = 5
                            break;
                        case '2条':
                            idx = 6
                            break;
                        case '2-5条':
                            idx = 7
                            break;
                        case '5-9条':
                            idx = 8
                            break;
                        case '10-20条':
                            idx = 9
                            break;
                        case '20条以上':
                            idx = 10
                            break;
                        default:
                            ;
                    }
                    orderCount[idx] = data.orderCount
                }

                var main2Option = {
                    color: ['#4690FF'],
                    title: {
                        text: '一次购买人数'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: false,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['购买人数']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: ['1包', '2包', '3-5包', '6-9包', '1条', '1-2条', '2条', '2-5条', '5-9条', '10-20条', '20条以上']
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            name: '购买人数',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value} 人'
                            }
                        },],
                    series: [{
                        name: '购买人数',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: orderCount
                    }]
                }
                myChart2.setOption(main2Option)
            },
            updateMain3Data: function (main3Data) {
                if (!main3Data) return

                var names = []
                var times = []
                var quantity = []
                for (var index in main3Data) {
                    var data = main3Data[index]
                    names.push(data.name)
                    times.push(data.time)
                    quantity.push(data.quantity)
                }

                var main3Option = {
                    color: ['#4690FF', '#A3D2F7'],
                    title: {
                        text: '业态购买分布'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: false,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['购买人数', '购买量']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: names
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            name: '购买人数',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value} 人'
                            }
                        }, {
                            type: 'value',
                            name: '购买量',
                            position: 'right',
                            axisLabel: {
                                formatter: '{value} 包'
                            }
                        }],
                    series: [{
                        name: '购买人数',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: times
                    }, {
                        name: '购买量',
                        type: 'bar',
                        yAxisIndex: 1,
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: quantity
                    }]
                }
                myChart3.setOption(main3Option)
            },
            updateMain4Data: function (main4Data) {
                var res = [0, 0, 0, 0, 0, 0];

                if (main4Data) {
                    for (var index in main4Data) {
                        var data = main4Data[index]
                        var idx
                        switch (data.quantitySum) {
                            case '2':
                                idx = 0
                                break;
                            case '3':
                                idx = 1
                                break;
                            case '4':
                                idx = 2
                                break;
                            case '5':
                                idx = 3
                                break;
                            case '6':
                                idx = 4
                                break;
                            case '7':
                                idx = 5
                                break;
                            default:
                                ;
                        }
                        res[idx] = data.orderCount
                    }
                }
                var main4Option = {
                    color: ['#4690FF'],
                    title: {
                        text: '年龄购买分布'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: false,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['购买次数']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: ['20岁', '30岁', '40岁', '50岁', '60岁', '其他']
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            name: '购买次数',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value} 次'
                            }
                        },],
                    series: [{
                        name: '购买次数',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: res
                    }]
                }
                myChart4.setOption(main4Option)
            },
            updateMain5Data: function (main5Data) {
                if (!main5Data) return
                /**
                 * 为了解决数据为空的情况，采用如此方法解决
                 * main1Data:[{name:'00:00-05:59',time:12,quantity:200}]
                 *
                 * */

                var quantitySum = []
                var orderCount = []
                for (var index in main5Data) {
                    var data = main5Data[index]
                    quantitySum.push(data.quantitySum)
                    orderCount.push(data.orderCount)
                }

                var main5Option = {
                    color: ['#4690FF'],
                    title: {
                        text: '购买变化次数'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: false,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['购买次数']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: quantitySum
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            name: '购买次数',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value} 次'
                            }
                        },],
                    dataZoom: [{
                        "show": true,
                        "height": 30,
                        "xAxisIndex": [
                            0
                        ],
                        bottom: 305,
                        "start": 60,
                        "end": 75,
                        handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                        handleSize: '110%',
                        handleStyle: {
                            color: "#d3dee5",

                        },
                        textStyle: {
                            color: "#fff"
                        },
                        borderColor: "#90979c"


                    }, {
                        "type": "inside",
                        "show": true,
                        "height": 15,
                        "start": 1,
                        "end": 35
                    }],
                    series: [{
                        name: '购买次数',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: orderCount
                    }]
                }
                myChart5.setOption(main5Option)
            },
            updateMain6Data: function (main6Data) {
                if (!main6Data) return
                var names = []
                var times = []
                var quantity = []

                var totalTimes = 0;
                var totalQuantity = 0;
                for (var index in main6Data) {
                    var data = main6Data[index]
                    names.push(data.name);
                    times.push(data.time);
                    quantity.push(data.quantity);
                    totalTimes += data.time;
                    totalQuantity += data.quantity;
                }

                times.unshift(totalTimes);
                quantity.unshift(totalQuantity);
                names.unshift("合计");

                var main6Option = {
                    //  color: ['#4690FF'],
                    title: {
                        text: '消费者注册数,购买次数'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: false,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['注册数', "购买次数"]
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: names
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            // name: '消费人数',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value} '
                            }
                        },],
                    series: [{
                        name: '注册数',
                        stack: "总量",
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: "rgba(97,97,97,1)",
                                label: {
                                    show: true,
                                    textStyle: {
                                        color: "#fff"
                                    },
                                    position: "insideTop",
                                    formatter: function (p) {
                                        return p.value + '人';
                                    }
                                }
                            }
                        },
                        data: times
                    }, {
                        name: '购买次数',
                        stack: "总量",
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: "rgba(226,108,34,1)",
                                label: {
                                    show: true,
                                    textStyle: {
                                        color: "#fff"
                                    },
                                    position: "top",
                                    formatter: function (p) {
                                        return p.value + '次';
                                    }
                                }
                            }
                        },
                        data: quantity
                    }]
                }
                myChart6.setOption(main6Option)
            },
            updateMain7Data: function (main7Data) {
                if (!main7Data) return

                var times = []
                var names = []
                //var totalTimes = 0;
                for (var index in main7Data) {
                    var data = main7Data[index]
                    times.push(data.time);
                    names.push(data.name)
                    //  totalTimes += data.time;
                }

                // times.unshift(totalTimes);
                // names.unshift("合计");

                var main7Option = {
                    color: ['rgba(97,97,97,1)'],
                    title: {
                        text: '消费次数前十客户'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: false,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['消费次数']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: names,
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            name: '消费次数',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value} 次'
                            }
                        }],
                    series: [{
                        name: '消费次数',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: times
                    }]
                }
                myChart7.setOption(main7Option)
            },
            updateMain8Data: function (main8Data) {
                if (!main8Data) return
                var times = []
                var quantity = []
                var prices = []
                var names = []

                var totilTimes = 0;
                var totilQuantity = 0;
                var totilPrices = 0;
                for (var index in main8Data) {
                    var data = main8Data[index]

                    times.push(data.time);
                    names.push(data.name)
                    quantity.push(data.quantity)
                    prices.push(data.prices)

                    totilTimes += data.time;
                    totilQuantity += data.quantity;
                    totilPrices += data.prices;
                }

                times.unshift(totilTimes);
                names.unshift("合计")
                quantity.unshift(totilQuantity)
                prices.unshift(totilPrices)

                var main8Option = {
                    color: ['#4690FF', '#A3D2F7'],
                    title: {
                        text: '消费者注册数'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: false,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['购买次数', '购买量']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: ['00:00-05:59', '06:00-07.59', '08:00-09.59', '10:00-11.59', '12:00-13.59', '14:00-15.59', '16:00-17.59', '18:00-19.59', '20:00-21.59', '22:00-23.59']
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            name: '购买次数',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value} 次'
                            }
                        }, {
                            type: 'value',
                            name: '购买量',
                            position: 'right',
                            axisLabel: {
                                formatter: '{value} 包'
                            }
                        }],
                    series: [{
                        name: '购买次数',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: times
                    }, {
                        name: '购买量',
                        type: 'bar',
                        yAxisIndex: 1,
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: quantity
                    }]
                }
                myChart8.setOption(main8Option)
            },
            initProduct: function () {
                $.ajax({
                    url: '${contextPath}/page/getProductThreeName',
                    success: function (data) {
                        if (data.success) {
                            var zNodes = data.data;

                            var setting = {
                                check: {
                                    enable: true,
                                    chkStyle: "checkbox",
                                },

                                data: {
                                    simpleData: {
                                        enable: true,
                                        idKey: "ID",
                                        pIdKey: "PID",
                                        rootPId: '0',
                                    },
                                    key: {
                                        name: "NAME"
                                    },
                                },
                            };

                            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                        }
                    }
                })
            },

        },
    })


    $(".main").height($("#main1").width())
    var myChart1 = echarts.init($("#main1")[0])
    var myChart2 = echarts.init($("#main2")[0])
    var myChart3 = echarts.init($("#main3")[0])
    var myChart4 = echarts.init($("#main4")[0])
    var myChart5 = echarts.init($("#main5")[0])
    var myChart7 = echarts.init($("#main7")[0])
    var myChart6 = echarts.init($("#main6")[0])

    app.initProduct();
    app.initTimeInput()
    app.getData();

    var selectProductTreeNames = function () {
        $("#gridSystemModal").modal('hide')
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = zTree.getCheckedNodes();
        app.productCode = ""
        if (nodes.length == 0) {
            $("#prodNameInput").val("")
            app.productCode = "'6901028039741'"
            return
        }
        var length = 0;
        for (var index in nodes) {
            var node = nodes[index]
            if (node.ISPRODNAME) {
                app.productCode = "'" + node.ID + "'," + app.productCode
                length++;
            }
        }
        app.productCode = app.productCode.substr(0, app.productCode.length - 1)
        $("#prodNameInput").val("已选择" + length + "条品规")
        app.isAllChoise = false
    }


    var cityNode = null, quXianNode = null, channelNode = null, empNode = null, custNode = null, shopNode = null;

    <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
    empNode = '#empNameInput';
    channelNode = '#channelNameInput';
    <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
    cityNode = '#cityNameInput';
    quXianNode = '#quXianNameInput';
    </shiro:hasPermission>
    </shiro:lacksPermission>

    organization_tree('${contextPath}', cityNode, quXianNode, channelNode, empNode, custNode, shopNode);
</script>
</html>


